<template>
  <div class="publish-container">
    <div class="publish-header">
      <h2>发布表白</h2>
      <p>写下你想说的话，让大家看看你的生活</p>
    </div>

    <div class="publish-form">
      <el-form :model="form" :rules="rules" ref="formRef">

        <el-form-item prop="messageContent">
          <el-input
            v-model="form.messageContent"
            type="textarea"
            :rows="5"
            placeholder="写下你想说的话..."
            maxlength="300"
            show-word-limit
            resize="none"
          ></el-input>
        </el-form-item>

        <el-form-item label="上传图片(最多9张)" prop="image">
          <el-upload
            v-model:file-list="form.image"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :limit="9"
            :on-exceed="handleExceed"
            :on-change="handleImageChange"
            :on-remove="handleRemove"
            accept="image/*"
            multiple
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>



          <el-button
            type="primary"
            @click="submitForm"
            :loading="submitting"
            class="submit-btn"
          >
            {{ submitting ? '发布中...' : '发布表白' }}
          </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import JSZip from 'jszip'
import { addCommentAPI } from '@/apis/push'
import { useRouter } from 'vue-router'


const router=useRouter()


const form = reactive({
  messageContent: '',
  image: []
})


const rules = {
  messageContent: [
    { required: true, message: '请输入表白内容', trigger: 'blur' },
    { min: 5, message: '内容至少5个字符', trigger: 'blur' }
  ]
}

const formRef = ref(null)
const submitting = ref(false)


const handleRemove = (file, fileList) => {
  form.image = fileList
}

const handleExceed = () => {
  ElMessage.warning('最多只能上传9张图片!')
}
const submitForm=async ()=>{
  try {
  await formRef.value.validate()
  }catch(err){
    ElMessage.error("请填写内容!");
    console.log(err)
  }
  try {
//处理表单数据
const zip=new JSZip()
for(let i=0;i<form.image.length;i++){
  const file=form.image[i].raw;
  console.log("原始file对象:  ",file)
  zip.file(file.name,file)
}
const imageZip=await zip.generateAsync({type:'blob'})
const formDate=new FormData()
formDate.append("messageContent",form.messageContent)
formDate.append("image",imageZip)
console.log("formDate: ",formDate.get('image'))
await addCommentAPI(formDate)
  ElMessage.success("添加评论成功!")
  router.push("/wall")
}catch(err){
  ElMessage.error("添加评论失败!")
  console.log("发送失败:",err)
}

}

</script>

<style scoped>

.publish-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.publish-header {
  text-align: center;
  margin-bottom: 30px;
}

.publish-header h2 {
  color: #f67280;
  font-size: 28px;
  margin-bottom: 10px;
}

.publish-header p {
  color: #666;
  font-size: 16px;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background: linear-gradient(135deg, #f67280, #c06c84);
  border: none;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #c06c84, #f67280);
}

:deep(.el-upload--picture-card) {
  background-color: #fbfbfb;
  border: 1px dashed #ddd;
  border-radius: 6px;
}

:deep(.el-upload--picture-card:hover) {
  border-color: #f67280;
}
</style>